<template>
    <div class="admin-data" ref="adminData">
        <div v-show="alasi">
            <Table border stripe :columns="columns" :data="data.data" :loading="loading" ref="adminTable"></Table>

            <Modal v-model="dataModal" @on-ok="src = ''">
                <div slot="header">
                    <Breadcrumb>
                        <BreadcrumbItem>{{ topTitle }}</BreadcrumbItem>
                        <BreadcrumbItem>{{ butTitle }}</BreadcrumbItem>
                    </Breadcrumb>
                </div>
                <div class="demo-carousel" style="width:100%">
                    <img v-if="src != ''" :src="src" width="100%" height="200px">
                </div>
            </Modal>
        </div>
        
        <div>
            <table class="dutyadmindata-table" border="1" cellspacing="0" style="margin-bottom: 10px">
                <thead class="table-head">
                    <tr>
                        <th>值班领导</th>
                        <th>环节干部</th>
                        <th>值班时间</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ data.leader_name.zh }}</td>
                        <td><p v-for="(item,ind) in data.cadredata" :key="ind" v-if="item.cadredata">{{ item.cadredata.teacher_name.zh }}</p></td>
                        <td>{{ data.created_at }}</td>
                    </tr>
                </tbody>
            </table>
            <table class="dutyadmindata-table" border="1" cellspacing="0">
                <thead class="table-head">
                    <tr>
                        <th>值班项</th>
                        <th>值班检查项</th>
                        <th>情况说明</th>
                        <th>反馈状态</th>
                        <th>反馈内容</th>
                        <th>现场资料</th>
                    </tr>
                </thead>
                <tbody v-for="(item, index) in data.data" :key="index">
                    <tr v-for="(w, q) in item.admininspectterm" :key="q">
                        <td v-if="q === 0" class="table-item1" :rowspan="item.admininspectterm.length"> {{ item.administrativeduty_name.zh }} </td>
                        <td class="table-item2">
                            {{ w.administrativeduty_name.zh }}
                        </td>
                        <td>
                            {{ w.explain.zh }}
                        </td>
                        <td>
                            {{ w.feedback === 1 ? '未反馈' : '已反馈' }}
                        </td>
                        <td>
                            {{ w.feedback_name?w.feedback_name.zh:'' }}
                        </td>
                        <td>
                            <img v-if="w.img" :src="w.img" @click="checkImg(w.img, item.administrativeduty_name.zh, w.administrativeduty_name.zh)" style="width:50px;height:50px;">
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        condition: Number
    },
    data () {
        return {
            alasi: false,
            dataModal: false,
            topTitle: '',
            butTitle: '',
            src: '',
            value: 0,

            height: 200,
            loading: true,
            data: Object,
            columns: [
                {
                    title: '值班领导',
                    minWidth: 100,
                    align: 'center',
                    render: (h, params) => {
                        let name = this.data.leader_name.zh
                        return h('div', name)
                    }
                },
                {
                    title: '环节干部',
                    minWidth: 100,
                    align: 'center',
                    render: (h, params) => {
                        let name = ''
                        this.data.cadredata.forEach(val=>{
                            name += val.cadredata.teacher_name.zh +' '
                        })
                        return h('div', name)
                    }
                },
                {
                    title: '值班项',
                    minWidth: 100,
                    align: 'center',
                    key: 'administrativeduty_name'
                },
                {
                    title: '值班检查项',
                    minWidth: 300,
                    align: 'center',
                    render: (h, params) => {
                        let data = params.row.admininspectterm
                        return h('div', data.map((el, w) => {
                            return h('div', {
                                style: {
                                    height: '35px',
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'center',
                                    overflow: 'hidden',
                                    borderTop: w != 0 ? '1px solid #e9eaec' : '0px',
                                }
                            }, el.administrativeduty_name.zh)
                        }))
                    }
                },
                {
                    title: '值班时间',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let data = params.row.admininspectterm
                        return h('div', data.map((el, w) => {
                            return h('div', {
                                style: {
                                    height: '35px',
                                    lineHeight: '35px',
                                    borderTop: w != 0 ? '1px solid #e9eaec' : '0px',
                                }
                            }, el.time)
                        }))
                    }
                },
                {
                    title: '情况说明',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let data = params.row.admininspectterm
                        return h('div', data.map((el, w) => {
                            return h('div', {
                                style: {
                                    height: '35px',
                                    lineHeight: '35px',
                                    overflow: 'hidden',
                                    borderTop: w != 0 ? '1px solid #e9eaec' : '0px',
                                }
                            }, el.explain.zh)
                        }))
                    }
                },
                {
                    title: '现场资料',
                    minWidth: 100,
                    align: 'center',
                    render: (h, params) => {
                        let data = params.row.admininspectterm
                        return h('div', data.map((el, w) => {
                            return h('div', {
                                style: {
                                    height: '35px',
                                    lineHeight: '35px',
                                    borderTop: w != 0 ? '1px solid #e9eaec' : '0px',
                                }
                            }, [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        disabled: el.img == null ? true : false
                                    },
                                    on: {
                                        click: () => {
                                            this.checkImg (el.img, params.row.administrativeduty_name.zh, el.administrativeduty_name.zh)
                                        },
                                    }
                                }, '查看')
                            ])
                        }))
                    }
                },
                {
                    title: '反馈状态',
                    minWidth: 100,
                    align: 'center',
                    render: (h, params) => {
                        let data = params.row.admininspectterm
                        return h('div', data.map((el, w) => {
                            return h('div', {
                                style: {
                                    height: '35px',
                                    lineHeight: '35px',
                                    borderTop: w != 0 ? '1px solid #e9eaec' : '0px',
                                }
                            }, el.feedback == 1 ? '未反馈' : '已反馈')
                        }))
                    }
                },
                {
                    title: '反馈内容',
                    minWidth: 150,
                    align: 'center',
                    render: (h, params) => {
                        let data = params.row.admininspectterm
                        return h('div', data.map((el, w) => {
                            return h('div', {
                                style: {
                                    height: '35px',
                                    lineHeight: '35px',
                                    borderTop: w != 0 ? '1px solid #e9eaec' : '0px',
                                }
                            }, el.feedback_name?el.feedback_name.zh:'')
                        }))
                    }
                }
            ],

            exportdata: [],
            exportcolumns: [
                {
                    title: '行政值班领导',
                    key: 'leader_name'
                },
                {
                    title: '行政值班环节干部',
                    key: 'cadre_name'
                },
                {
                    title: '行政值班项',
                    key: 'admin'
                },
                {
                    title: '行政值班检查项',
                    key: 'child'
                },
                {
                    title: '值班时间',
                    key: 'time'
                },
                {
                    title: '情况说明',
                    key: 'explain'
                },
                {
                    title: '反馈状态',
                    key: 'feedback'
                },
                {
                    title: '反馈内容',
                    key: 'text'
                }
            ],
            selUrl: `api/watchlist/v1/admininspecttermdata/info/${this.condition}`
        }
    },
    methods: {
        
        /************************************************************
         * 
         * 导出数据         
         * 
         ************************************************************/
        printingData () {
            this.exportdata = []
            let obj = {
                leader_name: '',
                cadre_name: '',
                admin: '',
                child: '',
                time: '',
                explain: '',
                feedback: '',
                text: ''
            }
            this.data.data.forEach(item => {
                item.admininspectterm.forEach(el => {
                    this.exportdata.push({
                        leader_name: this.data.leader_name.zh,
                        cadre_name: this.data.cadre_name.zh,
                        admin: item.administrativeduty_name.zh,
                        child: el.administrativeduty_name.zh,
                        time: el.time,
                        explain: el.explain.zh,
                        feedback: el.feedback == 1 ? '未反馈' : '已反馈',
                        text: el.feedback_name.zh
                    })
                })
            });

            let times = this.$dateTime()
            this.$refs.adminTable.exportCsv({
                filename: `行政值班数据 - ${times}`,
                columns: this.exportcolumns,
                data: this.exportdata
            });
        },
        
        /************************************************************
         * 
         * 查看现场资料         
         * 
         ************************************************************/
        checkImg (value, a, b) {
            this.topTitle = a
            this.butTitle = b
            this.src = value
            
            this.dataModal = true
        },
        
        /************************************************************
         * 
         * 查询数据         
         * 
         ************************************************************/
        queryData () {
            this.$http.get(this.selUrl).then(val=>{
                this.data = val.data
                this.loading = false
                // this.height = this.$refs.adminData.offsetHeight - 20
            }).catch(err => {
                this.loading = false
            })
        }
    },
    created () {
        this.queryData ()
    },
}
</script>
<style lang="less">
.admin-data {
    height: 100%;
    .ivu-table-cell {
        padding: 0;
    }
    
    .dutyadmindata-table {
        width: 100%;
        color: #515a6e;
        text-align: center;
        border: 1px solid #e8eaec!important;
        td, th {
            padding: 10px;
            border: 1px solid #e8eaec!important;
        }
        .table-head {
            background-color: #f8f8f8;
        }
        .table-item1 {
            max-width: 200px;
        }
        .table-item2 {
            max-width: 400px;
        }
    }
}
</style>

